﻿<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title></title>
<head>
	<th:block th:include="include :: header('新增通知公告')"/>
<!--	<th:block th:include="include :: summernote-css"/>
	<th:block th:include="include :: nc"/>-->
</head>
<style>
	.container {
		display: flex;
		justify-content: space-between; /* 或者可以尝试使用 space-around */
		width: 100%; /* 根据实际需求调整宽度，也可以使用具体像素值等 */
		height: 23%;
	}
	.child {
		height: 100px;
		flex: 1; /* 让所有子元素均分容器空间 */
		/* 可根据需求添加如背景色、边框、内边距等样式 */
		background-color: lightblue;
		margin: 65px; /* 为子元素间设置一些间距 */
		text-align: center; /* 文字居中显示 */
		padding: 0px; /* 内边距 */
		background: url('../../../static/img/1-2.png');
		background-size: cover;
	}
	.container_xb {
		display: flex;
		width: 100%; /* 可以根据需要调整宽度，如使用具体像素值 */
		height: 66%;
	}
	.child_xb {
		height: 100%;
		margin: -15px; /* 子元素间的间距 */
		padding: 20px; /* 内边距 */
		text-align: center; /* 文字居中 */
		box-sizing: border-box; /* 包含内边距和边框在元素总宽度内 */
	}
	.ys1{
		width: 25%;
	}
	.ys11{
		background: url('../../../static/img/1_3.png');
		background-size: cover;
		width: 100%;
		height: 50%;
	}
	.ys12{
		background: url('../../../static/img/1_3.png');
		background-size: cover;
		width: 100%;
		height: 50%;
	}
	.ys2{
		width: 50%;
		padding: 20px; /* 内边距 */
		background: url('../../../static/img/1_5.png');
		background-size: 90% 90%;
		background-repeat: no-repeat; /* 防止图片重复 */
		background-position: center center; /* 图片居中显示 */;
	}
	.ys3{
		width: 25%
	}
	.ys31{
		background: url('../../../static/img/1_4.png');
		background-size: cover;
		width: 100%;
		height: 50%;
	}
	.ys32{
		background: url('../../../static/img/1_4.png');
		background-size: cover;
		width: 100%;
		height: 50%;
	}
	.wjtj{
		width: 100%;
		height: 50%;
	}
	.wjtj1font{
		display: flex;
		justify-content: center; /* 水平居中 */
		align-items: center; /* 垂直居中 */
		font-family: Source Han Sans SC, Source Han Sans SC;
		font-weight: bold;
		font-size: 17px;
		color: #09FACD;
		line-height: 30px;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
	.wjtj2font{
		display: flex;
		justify-content: center; /* 水平居中 */
		font-family: Inter, Inter;
		font-weight: 400;
		font-size: 25px;
		color: #FFFFFF;
		line-height: 30px;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
	.titlename{
		display: flex;
		justify-content: center; /* 水平居中 */
		align-items: center; /* 垂直居中 */
		font-family: Source Han Sans SC, Source Han Sans SC;
		font-weight: bold;
		font-size: 30px;
		color: #09FACD;
		line-height: 30px;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
	.jrwjsl{
		display: flex;
		justify-content: center; /* 水平居中 */
		align-items: center; /* 垂直居中 */
		height: 19%;
		width: 36%;
		color: #09FACD;
		font-weight: 800;
	}
	.jrwjsly{
		display: flex;
		justify-content: center; /* 水平居中 */
		align-items: center; /* 垂直居中 */
		height: 19%;
		width: 36%;
		color: #09FACD;
		font-weight: 800;
		float: right;
	}
	.zylcjd{
		display: flex;
		justify-content: center; /* 水平居中 */
		align-items: center; /* 垂直居中 */
		height: 9%;
		width: 36%;
		color: #09FACD;
		font-weight: 800;
	}
	.container_b {
		display: flex;
		justify-content: space-around; /* 确保按钮平均分布 */
		width: 70%;
		margin-left: 15%;
		margin-top: 28px
	}

	.button {
		font-size: initial;
		height: 30px;
		width: 100px;
		padding: 5px; /* 为按钮内部添加一些内边距 */
		background-color: #068580 ; /* 按钮的背景颜色 */
		color: white; /* 按钮文字的颜色 */
		border: none; /* 移除按钮的默认边框 */
		text-align: center; /* 文字居中显示 */
		cursor: pointer; /* 鼠标悬停时显示为指针 */
	}

	.button:hover {
		background-color: #06605d; /* 鼠标悬停时的背景颜色变化 */
	}
	.container_jk {
		display: flex;
		flex-wrap: nowrap; /* 确保子元素不换行 */
		justify-content: space-between; /* 子元素平均分布 */
		width: 86%;
		margin-left: 7%;
	}

	.item1 {
		height: 342px;
		flex: 1; /* 所有子元素等宽 */
		margin: 5px; /* 可选：为子元素添加外边距 */
		padding: 5px; /* 可选：为子元素添加内边距 */
		box-sizing: border-box; /* 包含内边距和边框在元素总宽度内 */
		text-align: center; /* 文字居中显示 */

	}
	.gjt{
		margin-top: 30%;
		border: 1px solid #ccc; /* 子元素的边框 */
		width: 100%;
		height: 100%;
		background: linear-gradient( 180deg, rgba(0,224,255,0) 0%, rgba(0, 255, 163, 0) 100%);
		border-color: #15ACFD;
		border-radius: 15px;
	}
	.zt1{
		margin-top: 83%;
		font-family: Source Han Sans SC, Source Han Sans SC;
		font-weight: bold;
		font-size: 16px;
		color: #FFFFFF;
		line-height: 56px;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
	.zt2{
		font-family: Source Han Sans SC, Source Han Sans SC;
		font-weight: 400;
		font-size: 12px;
		color: #06FFAC;
		line-height: 56px;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
	.zt3{
		font-family: Source Han Sans SC, Source Han Sans SC;
		font-weight: bold;
		font-size: 16px;
		color: #FFFFFF;
		line-height: 56px;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.st1{
		margin-top: 0%;
		font-family: Source Han Sans SC, Source Han Sans SC;
		font-weight: bold;
		font-size: 16px;
		color: #FFFFFF;
		line-height: 50px;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
	.st2{
		font-family: Source Han Sans SC, Source Han Sans SC;
		font-weight: 400;
		font-size: 13px;
		color: #06FFAC;
		line-height: 0px;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
	.st3{
		font-family: Source Han Sans SC, Source Han Sans SC;
		font-weight: bold;
		font-size: 15px;
		color: #FFFFFF;
		line-height: 50px;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.container_tq {
		width: 100%; /* 父容器的宽度 */
		margin: 0 auto; /* 父容器居中 */
	}

	.item_tq {
		font-family: Inter, Inter;
		font-weight: 400;
		font-size: 14px;
		color: #FFFFFF;
		line-height: 24px;
		text-align: center;
		font-style: normal;
		text-transform: none;
		height: 22px;
		background: url('../../../static/img/1_7.png');
		background-size: 100% 100%;
		background-repeat: no-repeat; /* 防止图片重复 */
		background-position: center center; /* 图片居中显示 */;
        }

        /* 去除最后一个子div的底部边距 */
	.container_tq .item_tq:last-child {
		margin-bottom: 0;
	}
	.hd1{
		width: 100%;
		height: 30%;
		margin: 10px;
		background: linear-gradient( 180deg, rgba(0,224,255,0) 0%, rgba(0, 255, 163, 0) 100%);
		border-radius: 10px 10px 10px 10px;
		border: 1px solid;
		border-color: #15ACFD;
	}
</style>
<body>
<div style="width: 100%;height: 100%;background-color: #071E35">
	<div class="titlename" style="width: 100%;height: 10%;background: url('../../../static/img/1_1.png');background-size: cover;">智能网格产品监控</div><button style="position: absolute;
    top: 4px; /* 根据需要调整距离顶部的距离 */
    right: 20px; /* 根据需要调整距离右边的距离 */
    transform: skew(-20deg); /* 旋转角度 */
  transition: transform 0.3s ease; /* 平滑过渡效果 */
background-color: #0292c6;
color: #ffffee;
border: 0px" onclick="shouye()">首页</button>
	<div class="container">
	<!--	↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓文件数量统计↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓-->
		<div class="child">
			<div class="wjtj wjtj1font"> 文件总数</div>
			<div id="zwjs" class="wjtj wjtj2font">0</div>
		</div>
		<div class="child">
			<div class="wjtj wjtj1font"> 当日文件总数</div>
			<div id="drwjzs" class="wjtj wjtj2font">0</div>
		</div>
		<div class="child">
			<div class="wjtj wjtj1font"> 当天文件大小</div>
			<div id="jgsl" class="wjtj wjtj2font">0</div>
		</div>
		<div class="child">
			<div class="wjtj wjtj1font"> 当年文件大小</div>
			<div id="cpzlsl" class="wjtj wjtj2font">0</div>
		</div>
		<div class="child">
			<div class="wjtj wjtj1font"> 总文件大小</div>
			<div id="zwjdx" class="wjtj wjtj2font">0</div>
		</div>
		<!--	↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑文件数量统计↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑-->
	</div>
	<div class="container_xb">
		<!--	↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓左边的扇形图和折线图↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓-->
		<div class="child_xb ys1">
			<div class="ys11">
				<div class="jrwjsl">今日文件数量</div>
				<div id="jrmain" style="top: -10%;;width: 100%;height: 100%;margin-left: 15%;"></div>
			</div>
			<div class="ys12">
				<div class="jrwjsl">近七日数据量</div>
				<div id="qrmain" style="top: -18%;;width: 100%;height: 100%;margin-left: 15%;"></div>
			</div>
		</div>
		<!--	↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑左边的扇形图和折线图↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑-->
		<!--	↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓中间的智能网格数据监听统计↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓-->
		<div class="child_xb ys2">
			<div class="zylcjd">作业流程进度</div>
			<div style="width: 100%;height: 79%;">
				<div class="container_b">
					<button id="haimianfeng" class="button">海面风</button>
					<button id="hailang" class="button">海浪</button>
					<button id="hailiu" class="button">海流</button>
					<button id="haibiao" class="button">海表面温度</button>
					<button id="haibing" class="button">海冰</button>
				</div>
				<div class="container_jk">
					<div class="item1">
						<div id="gjt1" class="gjt">
							<div class="zt1">国家台</div>
							<div class="zt2">国家指导产品</div>
							<div id="zt3" class="zt3">未完成</div>
						</div>
					</div>
					<div class="item1">
						<div class="container_tq">
							<div id="lnst" class="item_tq" style="margin-top: 30%;">辽宁省台</div>
							<div id="dlst" class="item_tq">大连省台</div>
							<div id="hbst" class="item_tq">河北省台</div>
							<div id="tjst" class="item_tq">天津省台</div>
							<div id="sdst" class="item_tq">山东省台</div>
							<div id="qdst" class="item_tq">青岛省台</div>
							<div id="jsst" class="item_tq">江苏省台</div>
							<div id="shst" class="item_tq">上海市台</div>
							<div id="zjst" class="item_tq">浙江省台</div>
							<div id="nbst" class="item_tq">宁波市台</div>
							<div id="fjst" class="item_tq">福建省台</div>
							<div id="xmst" class="item_tq">厦门市台</div>
							<div id="gdst" class="item_tq">广东省台</div>
							<div id="szst" class="item_tq">深圳市台</div>
							<div id="gxst" class="item_tq">广西省台</div>
							<div id="hnst" class="item_tq">海南省台</div>
						</div>
					</div>
					<div class="item1">
						<div id="bh" class="hd1" style="margin-top: 30%;">
							<div class="st1">北海台区</div>
							<div class="st2">融合产品</div>
							<div id="bhz" class="st3">未完成</div>
						</div>
						<div id="dh" class="hd1">
							<div class="st1">东海台区</div>
							<div class="st2">融合产品</div>
							<div id="dhz" class="st3">未完成</div>
						</div>
						<div id="nh" class="hd1">
							<div class="st1">南海台区</div>
							<div class="st2">融合产品</div>
							<div id="nhz" class="st3">未完成</div>
						</div>
					</div>
					<div class="item1">
						<div id="bh1" class="hd1" style="margin-top: 30%;">
							<div  class="st1">北海台区</div>
							<div class="st2">人机订正产品</div>
							<div id="bhz1" class="st3">未完成</div>
						</div>
						<div id="dh1" class="hd1">
							<div  class="st1">东海台区</div>
							<div class="st2">人机订正产品</div>
							<div id="dhz1" class="st3">未完成</div>
						</div>
						<div id="nh1" class="hd1">
							<div  class="st1">南海台区</div>
							<div class="st2">人机订正产品</div>
							<div id="nhz1" class="st3">未完成</div>
						</div>
					</div>
					<div class="item1">
						<div id="gjt4" class="gjt">
							<div class="zt1">国家台</div>
							<div class="zt2">融合产品</div>
							<div id="gjt4z" class="zt3">未完成</div>
						</div>
					</div>
					<div class="item1">
						<div id="gjt5" class="gjt">
							<div class="zt1">国家台</div>
							<div class="zt2">人机订正产品</div>
							<div id="gjt5z" class="zt3">未完成</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--	↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑中间的智能网格数据监听统计↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑-->
		<!--	↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓右边的报道情况和报道文件↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓-->
		<div class="child_xb ys3">
			<div class="ys31">
				<div class="jrwjsly">智能网格产品种类</div>
				<div style="    height: 57%;width: 100%; justify-content: center; align-items: center; ">
					<div style="height: 50%;width: 91%;display: flex;justify-content: center;align-items: center;">
						<div id="l1" style="height: 100%;width: 17%;margin-top: 39px;background-color: #038899;border-radius: 15px;color: #ffffee;font-size: 14px;display: flex;align-items: center;justify-content: center;border: 1px solid #15acfd;">国家台<br>（国家级指导）</div>
						<div id="l2" style="height: 100%;width: 17%;margin-top: 39px;background-color: #038899;border-radius: 15px;color: #ffffee;font-size: 14px;display: flex;align-items: center;justify-content: center;border: 1px solid #15acfd;">省台</div>
						<div id="l3" style="height: 100%;width: 17%;margin-top: 39px;background-color: #038899;border-radius: 15px;color: #ffffee;font-size: 14px;display: flex;align-items: center;justify-content: center;border: 1px solid #15acfd;">北海台区<br>（融合）</div>
						<div id="l4" style="height: 100%;width: 17%;margin-top: 39px;background-color: #038899;border-radius: 15px;color: #ffffee;font-size: 14px;display: flex;align-items: center;justify-content: center;border: 1px solid #15acfd;">东海台区<br>（融合）</div>
						<div id="l5" style="height: 100%;width: 17%;margin-top: 39px;background-color: #038899;border-radius: 15px;color: #ffffee;font-size: 14px;display: flex;align-items: center;justify-content: center;border: 1px solid #15acfd;">南海台区<br>（融合）</div>
					</div>
					<div style="height: 50%;width: 91%;display: flex;justify-content: center; align-items: center;">
						<div id="l6" style="height: 100%;width: 17%;margin-top: 39px;background-color: #038899;border-radius: 15px;color: #ffffee;font-size: 14px;display: flex;align-items: center;justify-content: center;border: 1px solid #15acfd;">北海台区<br>（订正）</div>
						<div id="l7" style="height: 100%;width: 17%;margin-top: 39px;background-color: #038899;border-radius: 15px;color: #ffffee;font-size: 14px;display: flex;align-items: center;justify-content: center;border: 1px solid #15acfd;">东海台区<br>（订正）</div>
						<div id="l8" style="height: 100%;width: 17%;margin-top: 39px;background-color: #038899;border-radius: 15px;color: #ffffee;font-size: 14px;display: flex;align-items: center;justify-content: center;border: 1px solid #15acfd;">南海台区<br>（订正）</div>
						<div id="l9" style="height: 100%;width: 17%;margin-top: 39px;background-color: #038899;border-radius: 15px;color: #ffffee;font-size: 14px;display: flex;align-items: center;justify-content: center;border: 1px solid #15acfd;">国家台<br>（融合）</div>
						<div id="l10" style="height: 100%;width: 17%;margin-top: 39px;background-color: #038899;border-radius: 15px;color: #ffffee;font-size: 14px;display: flex;align-items: center;justify-content: center;border: 1px solid #15acfd;">国家台<br>（订正）</div>
					</div>
				</div>
			</div>
			<div class="ys32">
				<div class="jrwjsly">最近文件</div>
				<div id="zjwj" style="width: 100%;height: 80%;margin-left: -8%;overflow: auto;">

				</div>
			</div>
		</div>
		<!--	↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑右边的报道情况和报道文件↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑-->
	</div>
</div>
</body>
<th:block th:include="include :: footer" />
<script>
	var prefix = ctx + "product/ncfilemonitor";
	console.log("开始")
	var haimBut = $("#haimianfeng");//初始化按钮海面风
	var hailangBut = $("#hailang");//初始化按钮海浪
	var hailiuBut = $("#hailiu");//初始化按钮海流
	var haibiaoBut = $("#haibiao");//初始化按钮海表面温度
	var haibingBut = $("#haibing");//初始化按钮海冰

	var but = "";
	// 为按钮绑定点击事件处理函数
	haimBut.on('click', function() {//海面风
		$("#haimianfeng").css("background-color","rgb(0 197 126)")
		$("#hailang").css("background-color","#06605d")
		$("#hailiu").css("background-color","#06605d")
		$("#haibiao").css("background-color","#06605d")
		$("#haibing").css("background-color","#06605d")
		//alert('按钮被点击了！海面风');
		huifustyle();//恢复默认样式
		but = "海面风"
		$.post(prefix + "/getjiankong",{filetype:"海面风"},function(data){
			console.log(data.data)
			for (let i = 0; i < data.data.length; i++) {
				datacl(data.data[i]);
			}
		});
	});
	hailangBut.on('click', function() {//海浪
		$("#haimianfeng").css("background-color","#06605d")
		$("#hailang").css("background-color","rgb(0 197 126)")
		$("#hailiu").css("background-color","#06605d")
		$("#haibiao").css("background-color","#06605d")
		$("#haibing").css("background-color","#06605d")
		huifustyle();//恢复默认样式
		but = "海浪"
		//alert('按钮被点击了！海浪');
		$.post(prefix + "/getjiankong",{filetype:"海浪"},function(data){
			console.log(data.data)
			for (let i = 0; i < data.data.length; i++) {
				datacl(data.data[i]);
			}
		});
	});
	hailiuBut.on('click', function() {//海流
		$("#haimianfeng").css("background-color","#06605d")
		$("#hailang").css("background-color","#06605d")
		$("#hailiu").css("background-color","rgb(0 197 126)")
		$("#haibiao").css("background-color","#06605d")
		$("#haibing").css("background-color","#06605d")
		huifustyle();//恢复默认样式
		but = "海流"
		//alert('按钮被点击了！海流');
		$.post(prefix + "/getjiankong",{filetype:"海流"},function(data){
			console.log(data.data)
			for (let i = 0; i < data.data.length; i++) {
				datacl(data.data[i]);
			}
		});
	});
	haibiaoBut.on('click', function() {//海表面温度
		$("#haimianfeng").css("background-color","#06605d")
		$("#hailang").css("background-color","#06605d")
		$("#hailiu").css("background-color","#06605d")
		$("#haibiao").css("background-color","rgb(0 197 126)")
		$("#haibing").css("background-color","#06605d")
		huifustyle();//恢复默认样式
		but = "海温"
		//alert('按钮被点击了！海表面温度');
		$.post(prefix + "/getjiankong",{filetype:"海温"},function(data){
			console.log(data.data)
			for (let i = 0; i < data.data.length; i++) {
				datacl(data.data[i]);
			}
		});
	});
	haibingBut.on('click', function() {//海冰
		$("#haimianfeng").css("background-color","#06605d")
		$("#hailang").css("background-color","#06605d")
		$("#hailiu").css("background-color","#06605d")
		$("#haibiao").css("background-color","#06605d")
		$("#haibing").css("background-color","rgb(0 197 126)")
		huifustyle();//恢复默认样式
		but = "海冰"
		//alert('按钮被点击了！海冰');
		$.post(prefix + "/getjiankong",{filetype:"海冰"},function(data){
			console.log(data.data)
			for (let i = 0; i < data.data.length; i++) {
				datacl(data.data[i]);
			}
		});
	});
	haimBut.click();//触发点击事件
	tongji7num();//折线图
	tongjijrnum();//饼状图
	getzuijin();//最近文件
	/**
	 * 网页头数据
	 */
	$.post(prefix + "/wjzs",function (data){
		console.log(data.data)
		$("#zwjs").text(data.data.filenum+"个")//文件总数
		$("#drwjzs").text(data.data.filedtnum+"个")//当日文件总数
		$("#jgsl").text(data.data.jgsize.toFixed(2)+"GB");//当天文件大小
		$("#cpzlsl").text(data.data.cptype.toFixed(2)+"GB");//当年文件大小
		$("#zwjdx").text((data.data.filesize.toFixed(2))+"GB")//总文件大小
	})
	function datacl(data){
		if(data.filest=="国家台"){
			if(data.ljb=="L0"){
				if(data.filetype == but){
					if(data.zt ==1){
						$("#gjt1").css("background","linear-gradient(rgba(0, 224, 255, 0.4) 0%, rgb(169 189 1 / 72%) 100%)");
						$("#zt3").text("完成(晚到)")
						$("#l1").css("background-color","#01b677")
					}else{
						$("#gjt1").css("background","linear-gradient(180deg, rgba(0, 224, 255, 0.4) 0%, rgb(4 181 117 / 88%) 100%)");
						$("#zt3").text("完成")
						$("#l1").css("background-color","#01b677")
					}

				}else{
					$("#gjt1").css("background","linear-gradient(rgba(0, 224, 255, 0.4) 0%, rgb(0 255 163 / 0%) 0%)");
					$("#zt3").text("未完成")
				}
			}
			if(data.ljb=="L4"){
				if(data.filetype == but){
					if(data.zt == 1){
						$("#gjt4").css("background","linear-gradient(rgba(0, 224, 255, 0.4) 0%, rgb(169 189 1 / 72%) 100%)");
						$("#gjt4z").text("完成(晚到)")
						$("#l9").css("background-color","#01b677")
					}else{
						$("#gjt4").css("background","linear-gradient(180deg, rgba(0, 224, 255, 0.4) 0%, rgb(4 181 117 / 88%) 100%)");
						$("#gjt4z").text("完成")
						$("#l9").css("background-color","#01b677")
					}
				}else{
					$("#gjt4").css("background","linear-gradient(rgba(0, 224, 255, 0.4) 0%, rgb(0 255 163 / 0%) 0%)");
					$("#gjt4z").text("未完成")
				}
			}
			if(data.ljb=="L5"){
				if(data.filetype == but){
					if(data.zt == 1){
						$("#gjt5").css("background","linear-gradient(rgba(0, 224, 255, 0.4) 0%, rgb(169 189 1 / 72%) 100%)");
						$("#gjt5z").text("完成(晚到)")
						$("#l10").css("background-color","#01b677")
					}else{
						$("#gjt5").css("background","linear-gradient(180deg, rgba(0, 224, 255, 0.4) 0%, rgb(4 181 117 / 88%) 100%)");
						$("#gjt5z").text("完成")
						$("#l10").css("background-color","#01b677")
					}
				}else{
					$("#gjt5").css("background","linear-gradient(rgba(0, 224, 255, 0.4) 0%, rgb(0 255 163 / 0%) 0%)");
					$("#gjt5z").text("未完成")
				}
			}
		}
		if(data.filest=="东海区台"){
			if(data.ljb=="L2"){
				if(data.filetype == but){
					if(data.zt == 1){
						$("#dh").css("background","linear-gradient(rgba(0, 224, 255, 0.4) 0%, rgb(169 189 1 / 72%) 100%)");
						$("#dhz").text("完成(晚到)")
						$("#l4").css("background-color","#01b677")
					}else{
						$("#dh").css("background","linear-gradient(180deg, rgba(0, 224, 255, 0.4) 0%, rgb(4 181 117 / 88%) 100%)");
						$("#dhz").text("完成")
						$("#l4").css("background-color","#01b677")
					}
				}else{
					$("#dh").css("background","linear-gradient(rgba(0, 224, 255, 0.4) 0%, rgb(0 255 163 / 0%) 0%)");
					$("#dhz").text("未完成")
				}
			}
			if(data.ljb=="L3"){
				if(data.filetype == but){
					if(data.zt ==1){
						$("#dh1").css("background","linear-gradient(rgba(0, 224, 255, 0.4) 0%, rgb(169 189 1 / 72%) 100%)");
						$("#dhz1").text("完成(晚到)")
						$("#l7").css("background-color","#01b677")
					}else{
						$("#dh1").css("background","linear-gradient(180deg, rgba(0, 224, 255, 0.4) 0%, rgb(4 181 117 / 88%) 100%)");
						$("#dhz1").text("完成")
						$("#l7").css("background-color","#01b677")
					}

				}else{
					$("#dh1").css("background","linear-gradient(rgba(0, 224, 255, 0.4) 0%, rgb(0 255 163 / 0%) 0%)");
					$("#dhz1").text("未完成")
				}
			}
		}
		if(data.filest=="北海区台"){
			if(data.ljb=="L2"){
				if(data.filetype == but){
					if(data.zt == 1){
						$("#bh").css("background","linear-gradient(rgba(0, 224, 255, 0.4) 0%, rgb(169 189 1 / 72%) 100%)");
						$("#bhz").text("完成(晚到)")
						$("#l3").css("background-color","#01b677")
					}else{
						$("#bh").css("background","linear-gradient(180deg, rgba(0, 224, 255, 0.4) 0%, rgb(4 181 117 / 88%) 100%)");
						$("#bhz").text("完成")
						$("#l3").css("background-color","#01b677")
					}
				}else{
					$("#bh").css("background","linear-gradient(rgba(0, 224, 255, 0.4) 0%, rgb(0 255 163 / 0%) 0%)");
					$("#bhz").text("未完成")
				}
			}
			if(data.ljb=="L3"){
				if(data.filetype == but){
					if(data.zt ==1){
						$("#bh1").css("background","linear-gradient(rgba(0, 224, 255, 0.4) 0%, rgb(169 189 1 / 72%) 100%)");
						$("#bhz1").text("完成(晚到)")
						$("#l6").css("background-color","#01b677")
					}else{
						$("#bh1").css("background","linear-gradient(180deg, rgba(0, 224, 255, 0.4) 0%, rgb(4 181 117 / 88%) 100%)");
						$("#bhz1").text("完成")
						$("#l6").css("background-color","#01b677")
					}
				}else{
					$("#bh1").css("background","linear-gradient(rgba(0, 224, 255, 0.4) 0%, rgb(0 255 163 / 0%) 0%)");
					$("#bhz1").text("未完成")
				}
			}
		}
		if(data.filest=="南海区台"){
			if(data.ljb=="L2"){
				if(data.filetype == but){
					if(data.zt == 1){
						$("#nh").css("background","linear-gradient(rgba(0, 224, 255, 0.4) 0%, rgb(169 189 1 / 72%) 100%)");
						$("#nhz").text("完成(晚到)")
						$("#l5").css("background-color","#01b677")
					}else{
						$("#nh").css("background","linear-gradient(180deg, rgba(0, 224, 255, 0.4) 0%, rgb(4 181 117 / 88%) 100%)");
						$("#nhz").text("完成")
						$("#l5").css("background-color","#01b677")
					}
				}else{
					$("#nh").css("background","linear-gradient(rgba(0, 224, 255, 0.4) 0%, rgb(0 255 163 / 0%) 0%)");
					$("#nhz").text("未完成")
				}
			}
			if(data.ljb=="L3"){
				if(data.filetype == but){
					if(data.zt == 1){
						$("#nh1").css("background","linear-gradient(rgba(0, 224, 255, 0.4) 0%, rgb(169 189 1 / 72%) 100%)");
						$("#nhz1").text("完成(晚到)")
						$("#l8").css("background-color","#01b677")
					}else{
						$("#nh1").css("background","linear-gradient(180deg, rgba(0, 224, 255, 0.4) 0%, rgb(4 181 117 / 88%) 100%)");
						$("#nhz1").text("完成")
						$("#l8").css("background-color","#01b677")
					}
				}else{
					$("#nh1").css("background","linear-gradient(rgba(0, 224, 255, 0) 0%, rgb(0 255 163 / 0%) 0%)");
					$("#nhz1").text("未完成")
				}
			}
		}
		var st = 0;
		if(data.filest=="辽宁省台"){
			if(data.ljb=="L1") {
				if (data.filetype == but) {
					if(data.zt == 1){
						$("#lnst").css("background","url(../../../static/img/1_9.png)");
						$("#lnst").css("background-size","100% 100%");
						st = st+1;
					}else{
						$("#lnst").css("background","url(../../../static/img/1_8.png)");
						$("#lnst").css("background-size","100% 100%");
					}
				}
			}

		}
		if(data.filest=="大连市台"){
			if(data.ljb=="L1") {
				if (data.filetype == but) {
					if(data.zt == 1){
						$("#dlst").css("background","url(../../../static/img/1_9.png)");
						$("#dlst").css("background-size","100% 100%");
						st = st+1;
					}else{
						$("#dlst").css("background","url(../../../static/img/1_8.png)");
						$("#dlst").css("background-size","100% 100%");
					}
				}
			}
		}
		if(data.filest=="河北省台"){
			if(data.ljb=="L1") {
				if (data.filetype == but) {
					if(data.zt == 1){
						$("#hbst").css("background","url(../../../static/img/1_9.png)");
						$("#hbst").css("background-size","100% 100%");
						st = st+1;
					}else{
						$("#hbst").css("background","url(../../../static/img/1_8.png)");
						$("#hbst").css("background-size","100% 100%");
					}
				}
			}
		}

		if(data.filest=="天津市台"){
			if(data.ljb=="L1") {
				if (data.filetype == but) {
					if(data.zt == 1){
						$("#tjst").css("background","url(../../../static/img/1_9.png)");
						$("#tjst").css("background-size","100% 100%");
						st = st+1;
					}else{
						$("#tjst").css("background","url(../../../static/img/1_8.png)");
						$("#tjst").css("background-size","100% 100%");
					}
				}
			}
		}
		if(data.filest=="山东省台"){
			if(data.ljb=="L1") {
				if (data.filetype == but) {
					if(data.zt == 1){
						$("#sdst").css("background","url(../../../static/img/1_9.png)");
						$("#sdst").css("background-size","100% 100%");
						st = st+1;
					}else{
						$("#sdst").css("background","url(../../../static/img/1_8.png)");
						$("#sdst").css("background-size","100% 100%");
					}
				}
			}
		}
		if(data.filest=="青岛市台"){
			if(data.ljb=="L1") {
				if (data.filetype == but) {
					if(data.zt == 1){
						$("#qdst").css("background","url(../../../static/img/1_9.png)");
						$("#qdst").css("background-size","100% 100%");
						st = st+1;
					}else{
						$("#qdst").css("background","url(../../../static/img/1_8.png)");
						$("#qdst").css("background-size","100% 100%");
					}
				}
			}
		}

		if(data.filest=="江苏省台"){
			if(data.ljb=="L1") {
				if (data.filetype == but) {
					if(data.zt == 1){
						$("#jsst").css("background","url(../../../static/img/1_9.png)");
						$("#jsst").css("background-size","100% 100%");
						st = st+1;
					}else{
						$("#jsst").css("background","url(../../../static/img/1_8.png)");
						$("#jsst").css("background-size","100% 100%");
					}
				}
			}
		}
		if(data.filest=="上海市台"){
			if(data.ljb=="L1") {
				if (data.filetype == but) {
					if(data.zt == 1){
						$("#shst").css("background","url(../../../static/img/1_9.png)");
						$("#shst").css("background-size","100% 100%");
						st = st+1;
					}else{
						$("#shst").css("background","url(../../../static/img/1_8.png)");
						$("#shst").css("background-size","100% 100%");
					}
				}
			}
		}
		if(data.filest=="浙江省台"){
			if(data.ljb=="L1") {
				if (data.filetype == but) {
					if(data.zt == 1){
						$("#zjst").css("background","url(../../../static/img/1_9.png)");
						$("#zjst").css("background-size","100% 100%");
						st = st+1;
					}else{
						$("#zjst").css("background","url(../../../static/img/1_8.png)");
						$("#zjst").css("background-size","100% 100%");
					}
				}
			}
		}


		if(data.filest=="宁波市台"){
			if(data.ljb=="L1") {
				if (data.filetype == but) {
					if(data.zt == 1){
						$("#nbst").css("background","url(../../../static/img/1_9.png)");
						$("#nbst").css("background-size","100% 100%");
						st = st+1;
					}else{
						$("#nbst").css("background","url(../../../static/img/1_8.png)");
						$("#nbst").css("background-size","100% 100%");
					}
				}
			}
		}
		if(data.filest=="福建省台"){
			if(data.ljb=="L1") {
				if (data.filetype == but) {
					if(data.zt == 1){
						$("#fjst").css("background","url(../../../static/img/1_9.png)");
						$("#fjst").css("background-size","100% 100%");
						st = st+1;
					}else{
						$("#fjst").css("background","url(../../../static/img/1_8.png)");
						$("#fjst").css("background-size","100% 100%");
					}
				}
			}
		}
		if(data.filest=="厦门市台"){
			if(data.ljb=="L1") {
				if (data.filetype == but) {
					if(data.zt == 1){
						$("#xmst").css("background","url(../../../static/img/1_9.png)");
						$("#xmst").css("background-size","100% 100%");
						st = st+1;
					}else{
						$("#xmst").css("background","url(../../../static/img/1_8.png)");
						$("#xmst").css("background-size","100% 100%");
					}
				}
			}
		}

		if(data.filest=="广东省台"){
			if(data.ljb=="L1") {
				if (data.filetype == but) {
					if(data.zt == 1){
						$("#gdst").css("background","url(../../../static/img/1_9.png)");
						$("#gdst").css("background-size","100% 100%");
						st = st+1;
					}else{
						$("#gdst").css("background","url(../../../static/img/1_8.png)");
						$("#gdst").css("background-size","100% 100%");
					}
				}
			}
		}
		if(data.filest=="深圳市台"){
			if(data.ljb=="L1") {
				if (data.filetype == but) {
					if(data.zt == 1){
						$("#szst").css("background","url(../../../static/img/1_9.png)");
						$("#szst").css("background-size","100% 100%");
						st = st+1;
					}else{
						$("#szst").css("background","url(../../../static/img/1_8.png)");
						$("#szst").css("background-size","100% 100%");
					}
				}
			}
		}
		if(data.filest=="广西省台"){
			if(data.ljb=="L1") {
				if (data.filetype == but) {
					if(data.zt == 1){
						$("#gxst").css("background","url(../../../static/img/1_9.png)");
						$("#gxst").css("background-size","100% 100%");
						st = st+1;
					}else{
						$("#gxst").css("background","url(../../../static/img/1_8.png)");
						$("#gxst").css("background-size","100% 100%");
					}
				}
			}
		}
		if(data.filest=="海南省台"){
			if(data.ljb=="L1") {
				if (data.filetype == but) {
					if(data.zt == 1){
						$("#hnst").css("background","url(../../../static/img/1_9.png)");
						$("#hnst").css("background-size","100% 100%");
						st = st+1;
					}else{
						$("#hnst").css("background","url(../../../static/img/1_8.png)");
						$("#hnst").css("background-size","100% 100%");
					}
				}
			}
		}
		if(st == 16){
			$("#l2").css("background-color","#00f7a2")
		}
	}
	function huifustyle(){
		$("#gjt1").css("background","linear-gradient(rgba(0, 224, 255, 0) 0%, rgb(0 255 163 / 0%) 0%)");
		$("#zt3").text("未完成")
		$("#gjt4").css("background","linear-gradient(rgba(0, 224, 255, 0) 0%, rgb(0 255 163 / 0%) 0%)");
		$("#gjt4z").text("未完成")
		$("#gjt5").css("background","linear-gradient(rgba(0, 224, 255, 0) 0%, rgb(0 255 163 / 0%) 0%)");
		$("#gjt5z").text("未完成")
		$("#dh").css("background","linear-gradient(rgba(0, 224, 255, 0) 0%, rgb(0 255 163 / 0%) 0%)");
		$("#dhz").text("未完成")
		$("#dh1").css("background","linear-gradient(rgba(0, 224, 255, 0) 0%, rgb(0 255 163 / 0%) 0%)");
		$("#dhz1").text("未完成")
		$("#bh").css("background","linear-gradient(rgba(0, 224, 255, 0) 0%, rgb(0 255 163 / 0%) 0%)");
		$("#bhz").text("未完成")
		$("#bh1").css("background","linear-gradient(rgba(0, 224, 255, 0) 0%, rgb(0 255 163 / 0%) 0%)");
		$("#bhz1").text("未完成")
		$("#nh").css("background","linear-gradient(rgba(0, 224, 255, 0) 0%, rgb(0 255 163 / 0%) 0%)");
		$("#nhz").text("未完成")
		$("#nh1").css("background","linear-gradient(rgba(0, 224, 255, 0) 0%, rgb(0 255 163 / 0%) 0%)");
		$("#nhz1").text("未完成")
		$("#lnst").css("background","url(../../../static/img/1_7.png)");
		$("#lnst").css("background-size","100% 100%");
		$("#dlst").css("background","url(../../../static/img/1_7.png)");
		$("#dlst").css("background-size","100% 100%");
		$("#hbst").css("background","url(../../../static/img/1_7.png)");
		$("#hbst").css("background-size","100% 100%");
		$("#tjst").css("background","url(../../../static/img/1_7.png)");
		$("#tjst").css("background-size","100% 100%");
		$("#sdst").css("background","url(../../../static/img/1_7.png)");
		$("#sdst").css("background-size","100% 100%");
		$("#qdst").css("background","url(../../../static/img/1_7.png)");
		$("#qdst").css("background-size","100% 100%");
		$("#jsst").css("background","url(../../../static/img/1_7.png)");
		$("#jsst").css("background-size","100% 100%");
		$("#shst").css("background","url(../../../static/img/1_7.png)");
		$("#shst").css("background-size","100% 100%");
		$("#zjst").css("background","url(../../../static/img/1_7.png)");
		$("#zjst").css("background-size","100% 100%");
		$("#nbst").css("background","url(../../../static/img/1_7.png)");
		$("#nbst").css("background-size","100% 100%");
		$("#fjst").css("background","url(../../../static/img/1_7.png)");
		$("#fjst").css("background-size","100% 100%");
		$("#xmst").css("background","url(../../../static/img/1_7.png)");
		$("#xmst").css("background-size","100% 100%");
		$("#gdst").css("background","url(../../../static/img/1_7.png)");
		$("#gdst").css("background-size","100% 100%");
		$("#szst").css("background","url(../../../static/img/1_7.png)");
		$("#szst").css("background-size","100% 100%");
		$("#gxst").css("background","url(../../../static/img/1_7.png)");
		$("#gxst").css("background-size","100% 100%");
		$("#hnst").css("background","url(../../../static/img/1_7.png)");
		$("#hnst").css("background-size","100% 100%");
	}

	/**
	 * 最近文件
	 */
	function getzuijin(){
		$.post(prefix + "/getzuijin",function(data){
			var html = "";
			for (let i = 0; i < data.data.length; i++) {
				html += "<div style='color: #ffffee;font-size: 9px;'>"+formatTimestamp(data.data[i].rktime)+"&nbsp;&nbsp;&nbsp;"+data.data[i].filename+"</div>"
			}
			$("#zjwj").html(html);
		})
	}

	function formatTimestamp(timestamp) {
		// 创建一个Date对象
		const date = new Date(timestamp);

		// 获取年、月、日
		const year = date.getFullYear();
		const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，需要加1，并且补零
		const day = date.getDate().toString().padStart(2, '0'); // 日期可能需要补零

		// 组合成字符串并返回
		return `${year}-${month}-${day}`;
	}
	function shouye(){
		window.location.href="/home";
	}
	/**
	 * 今日文件数量
	 */
	function tongjijrnum(){

		$.post(prefix + "/getdtdata",function(data) {
			console.log("饼状统计图")
			for (let i = 0; i < data.data.length; i++) {
				if(data.data[i].name == 'L0'){
					data.data[i].name = "L0-国家级指导"
				}
				if(data.data[i].name == 'L1'){
					data.data[i].name = "L1-省级人机交互订正后"
				}
				if(data.data[i].name == 'L2'){
					data.data[i].name = "L2-海区内订正场融合"
				}
				if(data.data[i].name == 'L3'){
					data.data[i].name = "L3-海区级人机交互订正后"
				}
				if(data.data[i].name == 'L4'){
					data.data[i].name = "L4-三海区融合"
				}
				if(data.data[i].name == 'L5'){
					data.data[i].name = "L5-国家中心人机交互订正后"
				}

			}
			var chartDom = document.getElementById('jrmain');
			var myChart = echarts.init(chartDom);
			var option;
			option = {
				width: 349,
				height: 213,
				tooltip: {
					trigger: 'item'
				},
				legend: {
					top:'center',
					left:8,
					orient: 'vertical', // 图例列表的布局朝向，'horizontal'为水平,'vertical'为垂直
					x: 'left', // 图例的位置
					textStyle: {
						color: '#ffffff' // 这里设置图例的字体颜色
					}
				},
				series: [
					{
						center: ['80%', '60%'],
						type: 'pie',
						radius: ['40%', '70%'],
						avoidLabelOverlap: false,
						itemStyle: {
							borderRadius: 10,
							borderColor: '#fff',
							borderWidth: 2
						},
						label: {
							show: false,
							position: 'center'
						},
						emphasis: {
							label: {
								show: false,
								fontSize: 40,
								fontWeight: 'bold'
							}
						},
						labelLine: {
							show: true
						},
						data:data.data

					}
				]
			};
			option && myChart.setOption(option);
		})
	}

	/**
	 * 七日数据量
	 */
	function tongji7num(){
		$.post(prefix + "/get7data",function(data) {
			console.log(data.data.rp)
			console.log("折现统计图")
			var chartDom = document.getElementById('qrmain');
			var myChart = echarts.init(chartDom);
			var option;

			option = {
				width: 260,
				tooltip: {
					trigger: 'axis'
				},
				toolbox: {
					show: false,
					feature: {
						dataZoom: {
							yAxisIndex: 'none'
						},
						dataView: {readOnly: false},
						magicType: {type: ['line', 'bar']},
						restore: {},
						saveAsImage: {}
					}
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: data.data.rp,
					axisLabel: {
						textStyle: {
							color: '#ffffff' // X轴字体颜色
						}
					},
					axisTick: {
						show: false // 这里设置不显示横轴刻度线
					}
				},
				yAxis: {
					type: 'value',
					axisLabel: {
						formatter: '{value}'
					},
					axisLabel: {
						textStyle: {
							color: '#ffffff' // X轴字体颜色
						}
					},
				},
				series: [
					{
						type: 'line',
						data: data.data.gs,
						markPoint: {
							data: [
								{type: 'max', name: 'Max'},
								{type: 'min', name: 'Min'}
							]
						},
						markLine: {
							data: [{type: 'average', name: 'Avg'}]
						}
					},
				],
				dataZoom: [{ // 这个dataZoom组件，默认控制x轴。
					type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
					start: 0,      // 左边在 50% 的位置。
					end: 100        // 右边在 100% 的位置。
				}]
			};
			option && myChart.setOption(option);
		})
	}
</script>

</html>
